<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎使用</title>
		<link rel="stylesheet" href="../css/logins.css" />
	</head>
	<body>
		<!-- 所有的内容区域 -->
		<div class="all_content">
			<div class="top_logo">
				<img class="img_logo" src="../img/logo/logo_优化2.png" alt="" srcset="" />
				<p>校园失物招领平台</p>
			</div>
			<!-- 登录注册内容 -->
			<div class="d_content">
				<div id="id_login" class="d_login">登录</div>
				<div id="id_register" class="d_register">注册</div>
			</div>
			<!-- 登录的内容板块 -->
			<div id="id_login_content" class="login_content">
				<p class="p_account">手机号/学号</p>
				<div class="login_phone">
					<input type="text" maxlength="11" placeholder="请输入手机号或学号" />
				</div>
				<p>密码</p>
				<div class="login_pwd">
					<input type="text" placeholder="请输入密码" />
				</div>
				<div class="login_remember_pwd">
					<div class="div_remember">
						<input id="id_remember_pwd" type="checkbox" name="remember_pwd" /> <label
							for="id_remember_pwd">记住密码</label>
					</div>
					<a href="#" class="a_remeber_pwd">忘记密码</a>
				</div>
				<div class="div_login">登录</div>
			</div>
			<!-- 注册内容板块 -->
			<div id="id_register_content" class="register_content">
				<form action="#">
					<p class="p1">手机号码</p>
					<input class="register_input_phone" maxlength="11" type="text" name="phone" placeholder="请输入手机号码"/>
					<p class="p2">验证码</p>
					<div class="div_auth_code">
						<input class="register_input_yanzhengma" type="text" name="yanzhengma" placeholder="请输入验证码"/>
						<input type="button" value="获取验证码" />
					</div>
					<p class="p2">设置密码</p>
					<input class="register_input_pwd" type="text" name="pwd" placeholder="请输入6-20位密码"/>
					<p class="p2">确认密码</p>
					<input class="register_input_pwd" type="text" name="pwd2" placeholder="请再次确认密码"/>
					<p class="p2">学号</p>
					<input class="register_input_student_number" type="text" name="student_number" placeholder="学号"/>
				</form>
			</div>
			<div class="div_other_login">
				<div class="div2"></div>
				<div class="div3">
					其它登录方式
				</div>
				<div class="div4"></div>
			</div>
			<div class="other_login">
				<div class="other_login_item">
					<img src="../img/loginAndRegister/weixin.png" alt="" />
				</div>
				<div class="other_login_item">
					<img src="../img/loginAndRegister/qq.png" alt="" />
				</div>
				<div class="other_login_item">
					<img src="../img/loginAndRegister/zhifubao.png" alt="" />
				</div>
			</div>
			<!-- 协议 -->
			<div class="agrement">
				<span>注册即表示您同意我们的&nbsp;<a href="#">用户协议</a>&nbsp;和&nbsp;<a href="#">隐私协议</a></span>
			</div>
		</div>
		<script>
			const loginBtn = document.getElementById("id_login");
			const registerBtn = document.getElementById("id_register");
			
			const loginContent = document.getElementById("id_login_content");
			const registerContent = document.getElementById("id_register_content");
			
			loginBtn.addEventListener('click',function(){
				console.log("点击登录");
				loginContent.classList.add('login_content');
				registerContent.classList.remove('login_content');
			});
			registerBtn.addEventListener('click',function(){
				console.log("点击注册");
				registerContent.classList.add('login_content');
				loginContent.classList.remove('login_content');
			});
		</script>
	</body>
</html>